<!DOCTYPE html>
<html lang="en">
<head>
	<title>Calendar - Multiple Months</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="author" content="ComponentOne" />
	
	<link href="../../themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" />
	
	<script src="../../external/jquery-1.8.0.min.js" type="text/javascript"></script>
	<script src="../../external/jquery-ui-1.8.23.custom.min.js" type="text/javascript"></script>
	<link href="../../themes/wijmo/jquery.wijmo.wijcalendar.css" rel="stylesheet" type="text/css" />
	<script src="../../external/globalize.min.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijpopup.js" type="text/javascript"></script>
	<script src="../../wijmo/jquery.wijmo.wijcalendar.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function () {
			$("#calendar1").wijcalendar({ monthRows: 2, monthCols: 3 });

			$('#rows').bind("change keyup", function () {
				$("#calendar1").wijcalendar({ monthRows: $(this).val() * 1 });
			});

			$('#cols').bind("change keyup", function () {
				$("#calendar1").wijcalendar({ monthCols: $(this).val() * 1 });
			});
		});
	
	</script>
</head>
<body class="demo-single">
	<div class="container">
		<div class="header">
			<h2>
				Multiple Months</h2>
		</div>
		<div class="main demo">
			<!-- Begin demo markup -->
			<div id="calendar1">
			</div>
			<!-- End demo markup -->
			<div class="demo-options">
				<!-- Begin options markup -->
				<div class="option-row">
					<label for="rows">Rows</label>
					<select name="rows" id="rows">
						<option value="1">1</option>
						<option value="2" selected="selected">2</option>
						<option value="3">3</option>
						<option value="4">4</option>
					</select>
				</div>
				<div class="option-row">
					<label for="cols">Columns</label>
					<select name="cols" id="cols">
						<option value="1">1</option>
						<option value="2">2</option>
						<option value="3" selected="selected">3</option>
						<option value="4">4</option>
					</select>
				</div>
				<!-- End options markup -->
			</div>
		</div>
		<div class="footer demo-description">
			<p>
			This sample illustrates the wijcalendar widget's ability to show multiple months at one time. You can control how many months are displayed in each row and column by setting the monthRows and monthCols options. 
			</p>
		</div>
	</div>
</body>
</html>
